<template>
  <div class="common-layout">
    <el-container direction="vertical" style="height: 100vh">
      <el-container direction="horizontal" style="height: 80px">
        <el-aside width="200px">
          <p style="height: 100%; line-height: 80px">
            欢迎, {{ id }}
          </p>
        </el-aside>
        <el-container style="background-color: #a0cfff">
          <p style="margin-left: 20px;line-height: 80px;font-size: 24px">{{ currentTabName }}</p>
        </el-container>
      </el-container>
      <el-container style="height: 100%">
        <el-aside width="200px" style="height: 100%;background-color: white">
          <el-menu class="el-menu-demo" mode="vertical">
            <el-menu-item v-for="post in posts" :key="post" :index="post.id"
                          @click="currentTabName = post.nextTabName,
                          currentTabComponent= post.nextTabComponent">
              {{ post.nextTabName }}
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="background-color: #d9ecff;height: 100%">
          <component v-bind:is="currentTabComponent"></component>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Global from './Global.vue';
import ChangePwd from './ChangePwd.vue';
import Appointment from './Appointment.vue';
import ChangeRequest from './ChangeRequest.vue';
import ChargeInfo from './ChargeInfo.vue';
import StationPower from './StationPower.vue';
import ViewCurrentState from './ViewCurrentState.vue';
import ViewTheWaitingCars from './ViewTheWaitingCars.vue';
import DisplayReport from './DisplayReport.vue';
import LineInfo from './LineInfo.vue';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Layout',
  props: [
    'propsCurrentTabComponent',
    'propsCurrentTabName',
    'propsPosts',
  ],
  data() {
    return {
      id: Global.id,
      currentTabName: this.propsCurrentTabComponent,
      currentTabComponent: this.propsCurrentTabComponent,
      posts: this.propsPosts,
    };
  },
  components: {
    ChangePwd,
    Appointment,
    ChangeRequest,
    ChargeInfo,
    StationPower,
    ViewCurrentState,
    ViewTheWaitingCars,
    DisplayReport,
    LineInfo,
  },
};
</script>

<style scoped>

</style>
